<template>
  <div class="bw-node-attr-col-span" @click="onOpen">
    <ATextarea v-model:value="content" :readonly="true" />

    <BwModalForm
      :form-data="curFormData"
      v-bind="curOptions"
      v-model:visible="curVisible"
      @ok="onModalOk"
    />
  </div>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash-es'
import { BwModalForm } from '@/components/form'
import { ref, unref, computed, markRaw } from 'vue'

import { InputNumber } from 'ant-design-vue'

import type { BwColSpanModel } from './model'
interface BwColSpanProps {
  title?: string
  value?: BwColSpanModel
}

const emit = defineEmits(['update:value'])
const props = withDefaults(defineProps<BwColSpanProps>(), {
  title: '栅格占位配置',
})

const curVisible = ref<boolean>(false)
const curFormData = ref<BwColSpanModel>({})
const content = computed({
  get: () => (props.value ? JSON.stringify(props.value) : undefined),
  set: (value) => emit('update:value', value ? JSON.parse(value) : undefined),
})

const curOptions = computed(() => {
  return {
    title: props.title,
    width: 400,
    okText: '确定',
    cancelText: '取消',
    wrap: {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    },
    formRules: [
      {
        title: `栅格占位`,
        field: 'span',
        type: markRaw(InputNumber),
        props: {
          min: 0,
          max: 24,
          style: 'width: 100%',
          placeholder: `请填写栅格占位格数`,
        },
        rules: {
          required: true,
          message: `请填写栅格占位格数`,
        },
      },
      {
        title: `右偏移格数`,
        field: 'push',
        type: markRaw(InputNumber),
        props: {
          min: 0,
          max: 24,
          style: 'width: 100%',
          placeholder: `请填写右偏移格数`,
        },
      },
      {
        title: `左偏移格数`,
        field: 'pull',
        type: markRaw(InputNumber),
        props: {
          min: 0,
          max: 24,
          style: 'width: 100%',
          placeholder: `请填写左偏移格数`,
        },
      },
      {
        title: '左间隔格数',
        field: 'offset',
        type: markRaw(InputNumber),
        props: {
          min: 0,
          max: 24,
          style: 'width: 100%',
          placeholder: `请填写左间隔格数`,
        },
      },
    ],
  }
})

const onOpen = () => {
  curFormData.value = cloneDeep(props.value ?? {})
  curVisible.value = true
}

const onModalOk = () => {
  curVisible.value = false
  content.value = JSON.stringify(unref(curFormData))
}
</script>

<style lang="less" scoped>
.bw-node-attr-col-span {
  width: 100%;
  height: auto;
}
</style>
